import React from "react";
// connect 连接。连接 react 组件 与 redux 仓库
//    1. 是一个函数
//        1. mapStateToProps      映射仓库的state数据到组件的props上面
//        2. mapDispatchToProps   映射dispatch相关操作到组件的props上面
//    2. 返回一个高阶组件，返回的这个函数接收一个组件作为参数，最终得到一个新组件

// 1. mapDispatchToProps 如果没有传递的话，组件会自动收到一个 dispatch 的prop
import { connect } from "react-redux";
import Header from "./components/Header";
import Footer from "./components/Footer";

function App(props) {
  return (
    <div>
      <h1>App - {props.count}</h1>
      <button
        onClick={() => {
          // props.dispatch({ type: "increment" });
          props.add();
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          props.jian();
        }}
      >
        -
      </button>

      <hr />
      <Header />
      <hr />
      <Footer />
    </div>
  );
}

/**
 * 映射 仓库 state 数据到组件的 props 上
 */
const mapStateToProps = (state) => {
  console.log("mapStateToProps", state);
  // state - store.getState() 的返回值
  // 返回一个对象
  //      返回的对象会合并到 App 组件的 props 中
  // 仓库数据发生变化时，这个函数将会重新执行
  return {
    count: state.count,
  };
};

/**
 * 映射 仓库 dispatch 相关操作到组件的 props 上
 */
const mapDispatchToProps = (dispatch) => {
  /**
   * dispatch - store.dispatch
   * 返回一个对象
   *    返回的对象会合并到 App 组件的 props 中
   */
  return {
    add() {
      dispatch({ type: "increment" });
    },
    jian() {
      dispatch({ type: "decrement" });
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

// function connect() {
//   return () => {

//   }
// }

// connect()()
